<template>
  <a-modal
    title="编辑用户"
    v-model="$parent.showModel"
    @ok="save"
    @cancel="cancel"
    okText="保存"
    cancelText="取消"
    :width="836"
  >
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="员工姓名"
          >
            <a-input
              v-decorator="['employee_name',{rules: [{ required: true, message: '请输入员工姓名' }]}]"
              placeholder="请输入员工姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="员工昵称"
          >
            <a-input v-decorator="['nick_name']" placeholder="请输入员工昵称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="员工工号"
          >
            <a-input v-decorator="['employee_code']" placeholder="请输入员工工号" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="员工性别"
          >
            <a-radio-group v-decorator="['gender',{initialValue:'男'}]">
              <a-radio value="男">男</a-radio>
              <a-radio value="女">女</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="员工照片"
          >
            <a-button-group v-if="avatarUrl">
              <a-popover>
                <div slot="content">
                  <img :src="avatarUrl" style="width:80px;height:80px;" />
                </div>
                <a-button icon="camera"></a-button>
              </a-popover>
              <a-popconfirm title="确实要删除此照片吗?" @confirm="delAvatar" okText="确认" cancelText="取消">
                <a-button icon="delete" type="danger"></a-button>
              </a-popconfirm>
            </a-button-group>
            <!-- todo: 这个上传路径要修改 -->
            <a-upload
              v-else
              name="file"
              :multiple="false"
              :headers="uploadHeader"
              :showUploadList="false"
              action="http://127.0.0.1:3000/api/common/file/upload"
              @change="uploadEvent"
            >
              <a-button>
                <a-icon type="upload" />上传
              </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="婚姻状况"
          >
            <a-radio-group v-decorator="['has_marriage',{initialValue:'未婚'}]">
              <a-radio value="已婚">已婚</a-radio>
              <a-radio value="未婚">未婚</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24"></a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="证件类型"
          >
            <a-radio-group v-decorator="['idcard_type',{initialValue:'身份证'}]">
              <a-radio value="身份证">身份证</a-radio>
              <a-radio value="护照">护照</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="证件号码"
          >
            <a-input v-decorator="['idcard_num']" placeholder="请输入证件号码" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="出生日期"
          >
            <a-date-picker
              :disabledDate="cur=>cur > this.defaultBirthday"
              v-decorator="['birthday',{initialValue:this.defaultBirthday}]"
              placeholder="请选择员工生日"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="员工邮箱"
          >
            <a-input v-decorator="['email']" placeholder="请输入email" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="微信号"
          >
            <a-input v-decorator="['wechat']" placeholder="请输入微信号" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="QQ号"
          >
            <a-input type="number" v-decorator="['qq']" placeholder="请输入qq" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="联系电话"
          >
            <a-input v-decorator="['phone']" placeholder="请输入联系电话" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="紧急电话"
          >
            <a-input v-decorator="['phone_emergency']" placeholder="请输入紧急电话" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="是否党员"
          >
            <a-radio-group v-decorator="['is_in_party',{initialValue:'否'}]">
              <a-radio value="是">是</a-radio>
              <a-radio value="否">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <div style="display:inline-block;padding-left:12px;">员工备注：</div>
          <a-form-item style="display:inline-block;width:706px;margin-bottom:0px;">
            <a-textarea
              v-decorator="['employee_content']"
              placeholder="请输入信息备注"
              :autosize="{ minRows: 3, maxRows: 8 }"
            />
          </a-form-item>
          <a-form-item v-show="false">
            <a-input v-decorator="['id']" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import moment from "moment";
import cookie from "js-cookie";
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
};
export default {
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      uploadHeader: {},
      defaultBirthday: moment().subtract(16, "years"),
      avatarUrl: null
    };
  },
  created() {
    this.uploadHeader = {
      __domain: cookie.get("__domain"),
      __ya: cookie.get("__ya")
    };
  },
  methods: {
    async delAvatar(){
      await this.$post("/common/file/del", {avatarUrl: this.avatarUrl });
      this.avatarUrl = null;
    },
    uploadEvent(obj) {
      if (obj.file.status == "done") {
        this.avatarUrl = obj.file.response.url;
      }
    },
    async getDetail(id) {
      let { data } = await this.$post("/employee/employee/getDetail", { id });
      data.birthday = moment(data.birthday);
      this.$nextTick(_ => {
        this.form.setFieldsValue(data);
      });
    },
    save() {
      this.form.validateFields(async (err, values) => {
        if (err) return;
        if (values.birthday) {
          values.birthday = values.birthday.format("X");
        }
        if (!values.id) values.id = this.$emptyId;
        if(this.avatarUrl) values.avatar = this.avatarUrl;
        let result = await this.$post("/employee/employee/save", values);
        if (result.error) return;
        this.$notification.success({ message: "保存成功" });
        this.form.resetFields();
        this.$parent.showModel = false;
        if (values.id != this.$emptyId) {
          let index = this.$parent.data.findIndex(v => v.id == values.id);
          this.$parent.data.splice(index, 1, result.data);
          return;
        }
        this.$parent.dataCount += 1;
        if (this.$parent.pageIndex == 1) {
          this.$parent.data = [result.data].concat(this.$parent.data);
        }
        if (this.$parent.data.length > 38) {
          this.$parent.data.pop();
        }
      });
    },
    cancel() {
      this.form.resetFields();
      this.$parent.showModel = false;
    }
  }
};
</script>
